<template>
  <div class="app-container">
    <div ref="charts" class="charts" />
  </div>
</template>

<script>
export default {
  name: 'UiFuzhan',
  data() {
    return {
      test: [200, 170, 240, 244, 200, 220, 210]
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const echarts = require('echarts')
      const myChart = echarts.init(this.$refs.charts, 'charts')
      const option = {
        title: {
          text: '租赁负债表'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['利润', '支出', '收入']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value'
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        series: [
          {
            name: '利润',
            type: 'bar',
            label: {
              show: true,
              position: 'inside'
            },
            emphasis: {
              focus: 'series'
            },
            data: this.test
          },
          {
            name: '收入',
            type: 'bar',
            stack: '总量',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 302, 341, 374, 390, 450, 420]
          },
          {
            name: '支出',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'left'
            },
            emphasis: {
              focus: 'series'
            },
            data: [-120, -132, -101, -134, -190, -230, -210]
          }
        ]

      }
      myChart.setOption(option)
      // 图标自适应
      window.addEventListener('resize', function() {
        myChart.resize() // myChart 是实例对象
      })

      setInterval(() => {
        this.test[1] = this.test[1] += 2
        this.test[2] = this.test[2] += 1
        this.test[3] = this.test[3] += 3
        this.test[4] = this.test[4] += 4
        this.test[5] = this.test[5] += 1
        myChart.setOption(option)
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
	.charts{
		width: 100%;
		height: 600px;
	}

</style>
